<template>
    <div class="channel-list" v-loading="loading">
        <div>
            <div class="select-input">
                <el-select v-model="platObj2.name" style="width:220px" @change="selectPlatChange2">
                    <el-option v-for="(item, index) in platFormList2" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <div style="margin-left: 10px">
                    <el-button type="success" class="btn" @click="addNewTag">新建</el-button>
                </div>
            </div>
        </div>

        <div class="table-box">
            <el-table
                :data="list"
                border
                style="width: 100%">
                <el-table-column
                    width="70"
                    label="序号">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.$index + 1}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    prop="desc"
                    label="渠道">
                </el-table-column>
                <el-table-column
                    width="150"
                    prop="channel"
                    label="渠道码">
                </el-table-column>
                <el-table-column
                    min-width="80"
                    prop="name"
                    label="平台">
                </el-table-column>
                <el-table-column
                    min-width="80"
                    label="属性">
                    <template slot-scope="scope">
                        <span :style="{ 'color': scope.row.type === 1 && 'red'}">{{scope.row.type === 1 ? '重点' : '其他'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200"
                    label="备注">
                    <template slot-scope="scope">
                        <span>{{scope.row.noteMessage || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="推广链接">
                    <template slot-scope="scope">
                        <span>{{scope.row.channelUrl || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="100"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="item-td">
                            <span class="table-btn" @click="editTag(scope.row)">编辑</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            :title="title"
            :visible.sync="showEdit"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            class="tag-editor-box"
            width="800px">
            <el-form
                :model="currentItem"
                :rules="rules"
                ref="ruleForm"
                hide-required-asterisk
                label-width="70px">
                <el-form-item label="渠道" prop="desc">
                    <el-input v-model.trim="currentItem.desc"></el-input>
                </el-form-item>
                <el-form-item label="渠道码" prop="channel">
                    <el-input :disabled="title === '编辑渠道'" v-model.trim="currentItem.channel"></el-input>
                </el-form-item>
                <!-- 添加平台信息 -->
                <el-form-item label="平台">
                    <el-select v-model="platObj.name" style="width:220px" @change="selectPlatChange">
                        <el-option v-for="item in platFormList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="属性">
                    <el-select v-model="paramModel" style="width:220px" @change="selectParamChange">
                        <el-option v-for="item in paramList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="noteMessage">
                    <el-input v-model.trim="currentItem.noteMessage"></el-input>
                </el-form-item>
                <el-form-item label="推广链接" prop="channelUrl">
                    <el-input v-model.trim="currentItem.channelUrl"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="cancleSave">取 消</el-button>
                <el-button v-if="currentItem.status" type="primary" @click="saveTag">保 存</el-button>
                <el-button v-else type="success" @click="saveTag">新 建</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
export default {
    data () {
        return {
            keyword: '', // 查询关键字
            pageNum: 1,
            pageSize: 10,
            total: 0,
            list: [], // 标签列表
            loading: false, // 查询加载loading
            rules: {
                desc: [
                    { required: true, message: '请输入渠道名称', trigger: 'blur' }
                ],
                channel: [
                    { required: true, message: '请输入渠道码', trigger: 'blur' }
                ]

            },
            typeList: [],
            showEdit: false, // 是否显示编辑、创建标签弹窗
            title: '新建渠道', // 编辑创建弹窗标题
            currentItem: {}, // 被编辑对象
            platObj: {
                id: 0,
                name: ''
            },
            platObj2: {
                id: 0,
                name: ''
            },
            platFormList: [],
            platFormList2: [],
            paramList: [
                {
                    id: 0,
                    name: '其他'
                },
                {
                    id: 1,
                    name: '重点'
                } 
            ],
            paramModel: '其他'
        }
    },

    created () {
        this.selectPlatForm((obj) => {
            this.getList(obj)
        })
    },

    methods: {
        // 属性 选择字段
        selectParamChange (val) {
            this.paramModel = val
            this.$set(this.currentItem, 'type', val === '重点' ? 1 : 0)
        },
        // 获取平台下拉列表
        async selectPlatForm (callback) {
            let res = await this.$http.get('/apkManage/selectPlatForm')
            if (res.code === '0') {
                let arr = [{ id: '', name: '全部'}]
                this.platFormList = res.data
                this.platFormList2 = [...arr, ...res.data]
                this.platObj = { ...res.data[0] }
                this.platObj2 = { ...this.platFormList2[0] }
                callback(this.platObj2)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 添加编辑筛选
        selectPlatChange(val) {
            this.$set(this.currentItem, 'platformId', '')
            this.platObj = {}
            this.platFormList.forEach((item) => {
                if (item.name === val) {
                    this.platObj = { ...item }
                }
            })
        },
        // 列表筛选
        selectPlatChange2(val) {
            this.platObj2 = {}
            this.platFormList2.forEach((item) => {
                if (item.name === val) {
                    this.platObj2 = { ...item }
                    this.getList(item)
                }
            })
        },
        // 获取上传版本信息
        async getList (obj) {
            console.log(obj, 'obj....')
            this.loading = true
            let res = await this.$http.get('/apkManage/getChannel', {
                params: {
                    platformId: obj && obj.id,
                    version: ''
                }
            })
            if (res.code === '0') {
                this.list = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 新建标签
        addNewTag () {
            this.title = '新建渠道'
            this.currentItem = {
                platformId: '',
                channel: '',
                desc: '',
                type: 0
            }
            this.showEdit = true
        },

        // 编辑标签
        editTag (item) {
            this.title = '编辑渠道'
            this.currentItem = { ...item }
            this.platObj = { ...item }
            this.paramModel = this.currentItem.type === 1 ? '重点' : '其他'
            this.showEdit = true
        },

        // 取消保存
        cancleSave () {
            this.showEdit = false
            this.$refs.ruleForm.clearValidate()
        },

        // 保存标签
        saveTag () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    if (this.platObj && this.platObj.id) {
                        this.$set(this.currentItem, 'platformId', this.platObj.id)
                    } 
                    let res = await this.$http.post('/apkManage/saveChannel', this.currentItem)
                    if (res.code === '0') {
                        this.$message({
                            type: 'success',
                            message: this.title === '编辑渠道' ? '编辑成功' : '新建成功'
                        })
                        this.showEdit = false
                        this.$set(this.platObj2, 'name', this.platObj.name)
                        this.getList({ id: this.platObj.platformId })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.desc
                        })
                    }
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .select-input {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .channel-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin-top: 10px;

            .table-btn {
                color: #409EFF;
                font-size: 12px;
                cursor: pointer;
                margin-right: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                    opacity: .8;
                }
            }
        }

        .tools {
            margin-top: 10px;
            padding-right: 0px;
            display: flex;
            justify-content: flex-end;
        }

        .tag-editor-box {
            /deep/ .el-dialog__body {
                padding: 0 20px;
            }
        }
    }
</style>
